<template>
  <el-form
    class="form"
    :model="formParams"
    :label-width="labelWidth"
    :style="{ maxWidth: maxWidth }"
    :rules="rules"
  >
    <slot></slot>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">{{ submitText }}</el-button>
      <el-button text @click="handleClose">{{ cancelText }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
const props = defineProps({
  rules:{
    type: Object
  },
  formParams: {
    type: Object,
    required: true
  },
  labelWidth: {
    type: String,
    default: '30%'
  },
  maxWidth: {
    type: String,
    default: '90%'
  },
  submitText: {
    type: String,
    default: 'Create'
  },
  cancelText: {
    type: String,
    default: 'Cancel'
  }
})
const emit = defineEmits(['update:visible', 'submit'])

function handleClose() {
  emit('update:visible', false)
}

const onSubmit = () => {
  emit('submit', props.formParams)
}
</script>

<style scoped>
.form :deep(.el-form-item__content) {
  justify-content: flex-end;
}
</style>
